<template>
	<view class="Theatrebox">
		<view class="header">
			<div class="select">
				<uni-data-select @change="adressChange" border="0" v-model="value" :localdata="range" :clear="false"></uni-data-select>
			</div>
			<div class="search">
				<u-search v-model="keyword" @change="searTheatre" :showAction="false"></u-search>
			</div>
		</view>
		<view class="main">
			<view class="theatres" v-for="(item,index) in theatre">
				<div>
					<h5>{{item.name}}</h5>
					<p class="adress">{{item.address}}</p>
					<p class="score">影院评分: <span>{{item.score}}</span></p>
				</div>
				<div class="distance">
					<!-- 截取距离 修改单位-->
					<p>距离{{(item.distance).substr(0,item.distance.length-1)/1000 >=1 ? (item.distance).substr(0,item.distance.length-1)/1000+'km' : (item.distance).substr(0,item.distance.length-1)+'m'}}</p>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 5,
				range: [
					{value: 5, text: "大连市" },
					{ value: 0, text: "沙河口区" },
					{ value: 1, text: "甘井子区" },
					{ value: 2, text: "西岗区" },
					{value: 4, text: "中山区" },
					
				],
				theatre:[],
				keyword:''
			};
		},
		onLoad() {
			this.getMovieTheatre()
		},
		methods:{
			//获取影院列表
			getMovieTheatre(){   
				this.$request({
					url: '/prod-api/api/movie/theatre/list',
					method: 'GET'
				}).then(res => {
					// console.log(res);
					this.theatre=res.data.rows
					// console.log(this.range);
				}).catch(err => {
					console.log(err);
				})
			},
			adressChange(area){  //下拉选取地区影院
				let category = this.range.filter(o=>{
					return o.value==area
				})
				console.log(category);
				this.$request({
					url: '/prod-api/api/movie/theatre/list',
					method: 'GET',
					data:{
						area: category[0].value!==5 ?  category[0].text : ''
					}
				}).then(res => {
					this.theatre=res.data.rows
				}).catch(err => {
					console.log(err);
				})
			},
			searTheatre(val){
				if(val==''){
					this.getMovieTheatre()
				}else{
					this.theatre=this.theatre.filter(o=>o.name.indexOf(val)!=-1)
				}
			}
		}
	}
</script>

<style lang="scss">
.Theatrebox{
	background-color: #eeeeee;
	// height: calc(100vh - 188rpx);
	.header{
		display: flex;
		height: 88rpx;
		background-color: white;
		.select {
			width: 160rpx;
			margin-left: 20rpx;
			margin-right: 30rpx;
			margin-top: 5rpx;
			/deep/.uni-select{
				border: 0;
			}
		}
		.search{
			flex: 1;
			padding-right: 30rpx;
			padding-top: 10rpx;
		}
	}
	.main{
		margin-top: 2rpx;
		.theatres{
			padding: 30rpx;
			background-color: white;
			border-bottom: 2rpx solid #eeeeee;
			display: flex;
			.adress{
				font-size: 24rpx;
				
			}
			.score{
				font-size: 24rpx;
				span{
					font-size: 28rpx;
					color: red;
				}
			}
			.distance{
				margin-left: auto;
				font-size: 26rpx;
				margin-top: -5rpx;
			}
		}
	}
	
	
}
</style>
